<!DOCTYPE html PUBLIC>
<html>
    <head>
        <meta charset="utf-8" />
        <title>获取图片像素颜色,转换为css3 box-shadow</title>

        <style type="text/css">
            body {
                margin: 0px;
                background: #f2f2f0;
            }
            p {
                margin: 0px;
            }
            .title {
                color: #ffff00;
                background: #000000;
                text-align: center;
                font-size: 24px;
                line-height: 50px;
                font-weight: bold;
            }
            .file {
                position: absolute;
                width: 100%;
                font-size: 90px;
            }
            .filebtn {
                display: block;
                position: relative;
                height: 110px;
                color: #ffffff;
                background: #06980e;
                font-size: 48px;
                line-height: 110px;
                text-align: center;
                cursor: pointer;
                border: 3px solid #cccccc;
            }
            .filebtn:hover {
                background: #04bc0d;
            }
            .showimg {
                margin: 10px auto 10px auto;
                -webkit-transition: all 0.3s;
                transition: all 0.3s;
            }
            .showimg span {
                width: 1px;
                height: 1px;
                display: block;
                margin: -1px 0px 0px -1px;
            }
            .css_code {
                margin: 10px;
                padding: 10px;
                display: none;
                border: 1px solid #ffcc00;
                font-size: 12px;
                background: #f1f1f1;
                white-space: pre-wrap;
                word-wrap: break-word;
                height: 300px;
                overflow: auto;
            }
            .css_code:hover {
                background: #defede;
            }
        </style>

        <script type="text/javascript">
            window.onload = function () {
                var canvas = document.createElement('canvas')
                var context = canvas.getContext('2d')
                var showimg = document.getElementById('showimg')
                var shadow = showimg.getElementsByTagName('span')[0]
                var css_code = document.getElementById('css_code')
                var jieguo = document.getElementById('jieguo')

                document.getElementById('img').onchange = function () {
                    var img = event.target.files[0]

                    // 检查能否读取图片
                    if (!img) {
                        return
                    }

                    // 检查图片类型
                    if (
                        !(
                            img.type.indexOf('image') == 0 &&
                            img.type &&
                            /\.(?:jpg|png|gif)$/.test(img.name)
                        )
                    ) {
                        alert('图片只能是jpg,gif,png')
                        return
                    }

                    // 检查图片尺寸
                    if (img.size > 120 * 1024) {
                        alert('图片不能大于120K')
                        return
                    }

                    // file reader
                    var reader = new FileReader()
                    reader.readAsDataURL(img)

                    reader.onload = function (e) {
                        // reader onload start

                        var image = new Image()
                        image.src = e.target.result

                        image.onload = function () {
                            // image onload start

                            var img_width = this.width
                            var img_height = this.height

                            // 设置画布尺寸
                            canvas.width = img_width
                            canvas.height = img_height

                            // 将图片按像素写入画布
                            context.drawImage(this, 0, 0, img_width, img_height)

                            // 读取图片像素信息
                            var imageData = context.getImageData(0, 0, img_width, img_height)
                            console.log(imageData.data)
                            var arrbox = [],
                                length = imageData.data.length
                            var newArr = []
                            // 生成box-shadow
                            for (var i = 0; i < length; i++) {
                                if (i % 4 === 0) {
                                    // 每四个元素为一个像素数据 r,g,b,alpha

                                    var x = ((i / 4) % img_width) + 1 // 横坐标
                                    var y = Math.floor(i / 4 / img_width) + 1 // 纵坐标
                                    var alpha =
                                        Math.round((imageData.data[i + 3] / 255) * 100) / 100 // alpha 值

                                    if (imageData.data[i + 3] == 255) {
                                        // 没有alpha 值
                                        var hex = gethex(
                                            imageData.data[i],
                                            imageData.data[i + 1],
                                            imageData.data[i + 2]
                                        )
                                        arrbox.push(x + 'px ' + y + 'px #' + hex)
                                        newArr.push('#' + hex)
                                    } else if (alpha > 0) {
                                        // 有alpha 值
                                        var rgba =
                                            imageData.data[i] +
                                            ',' +
                                            imageData.data[i + 1] +
                                            ',' +
                                            imageData.data[i + 2] +
                                            ',' +
                                            alpha
                                        arrbox.push(x + 'px ' + y + 'px rgba(' + rgba + ')')
                                        newArr.push('rgba(' + rgba + ')')
                                    }
                                }
                            }
                            console.log(arrbox)
                            console.log(newArr)

                            let arr1 = []
                            let arr2 = []
                            for (let i = 0; i < newArr.length; i++) {
                                let index = arr1.indexOf(newArr[i])
                                if (index != -1) {
                                    arr2[index] += 1
                                } else {
                                    arr1.push(newArr[i])
                                    arr2.push(1)
                                }
                            }
                            console.log(arr1)
                            console.log(arr2)
                            let hebing = []
                            for (let j = 0; j < arr1.length; j++) {
                                let obj = { color: arr1[j], count: arr2[j] }
                                hebing.push(obj)
                            }
                            console.log(hebing)

                            // 编写方法，实现冒泡
                            let arrarr = hebing
                            //外层循环，控制趟数，每一次找到一个最大值
                            for (let i = 0; i < arrarr.length - 1; i++) {
                                // 内层循环,控制比较的次数，并且判断两个数的大小
                                for (var j = 0; j < arrarr.length - 1 - i; j++) {
                                    // 白话解释：如果前面的数大，放到后面(当然是从小到大的冒泡排序)
                                    if (arrarr[j].count < arrarr[j + 1].count) {
                                        let temp = arrarr[j]
                                        arrarr[j] = arrarr[j + 1]
                                        arrarr[j + 1] = temp
                                    }
                                }
                            }
                            console.log(arrarr) //[2, 4, 5, 12, 31, 32, 45, 52, 78, 89]
                            let baiCount = ''
                            for (let i = 0; i < arrarr.length - 1; i++) {
                                if (arrarr[i].color === '#ffffff') {
                                    baiCount = arrarr[i].count
                                    break
                                }
                            }
                            console.log(baiCount / newArr.length)
                            jieguo.innerHTML =
                                '白色像素共' +
                                baiCount +
                                ',像素总数为' +
                                newArr.length +
                                ',白色所占比例' +
                                baiCount / newArr.length
                            // 将数据写入dom
                            showimg.style.width = img_width + 'px'
                            showimg.style.height = img_height + 'px'

                            shadow.style.boxShadow = arrbox.join(',')

                            // 输出CSS3 box-shadow
                            // css_code.style.display = 'block';
                            // css_code.innerHTML = 'box-shadow: ' + arrbox.join(',');

                            // 获取16进制颜色
                            function gethex(r, g, b) {
                                r = r.toString(16)
                                g = g.toString(16)
                                b = b.toString(16)

                                // 补0
                                r.length == 1 ? (r = '0' + r) : ''
                                g.length == 1 ? (g = '0' + g) : ''
                                b.length == 1 ? (b = '0' + b) : ''

                                var hex = r + g + b

                                // 简化处理,如 FFEEDD 可以写为 FED
                                if (
                                    r.slice(0, 1) == r.slice(1, 1) &&
                                    g.slice(0, 1) == g.slice(1, 1) &&
                                    b.slice(0, 1) == b.slice(1, 1)
                                ) {
                                    hex = r.slice(0, 1) + g.slice(0, 1) + b.slice(0, 1)
                                }

                                return hex
                            }
                        } // image onload end
                    } // reader onload end
                }
            }
        </script>
    </head>

    <body>
        <p class="title">获取图片像素颜色,转换为CSS3 box-shadow</p>
        <p>
            <input type="file" class="file" id="img" /><label
                class="filebtn"
                for="img"
                title="JPG,GIF,PNG"
                >请选择图片(小于120K)</label
            >
        </p>
        <p class="showimg" id="showimg"><span></span></p>
        <p class="css_code" id="css_code"></p>
        <p id="jieguo"></p>
    </body>
</html>
